import { Button, Form, Input, Tabs, Message } from "@arco-design/web-react"
import TabPane from "@arco-design/web-react/es/Tabs/tab-pane"
import './index.css'
import { useNavigate } from "react-router-dom"


import http, { IM_SERVER_URL } from '../../http'
import FormItem from "@arco-design/web-react/es/Form/form-item"
import { useDispatch } from "react-redux"

import { updateUser } from '../../store/features/user'

import IMSDK from '../../sdk/index'
import { useEffect, useState } from "react"



export const Login = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const dispatch = useDispatch();

    const [loading, setLoading] = useState(false);



    const onSumit = async (from: any) => {
        setLoading(true);
        const response: any = await http.post("/login", from);
        console.log(response);
        if (response.code == 400) {
            Message.error(response.msg);
            setLoading(false);
        } else {
            var loginInfo = { loginUserId: response.data.user.userId, loginToken: response.data.token };
            IMSDK.loginImpl(loginInfo,IM_SERVER_URL)
            dispatch(updateUser(response.data))
           
        }
    }

    useEffect(()=> {
        IMSDK.callback_onIMAfterLoginSucess = (data: any) => {
            Message.success("登录成功");
            navigate("/chat")
          }
    },[])


    return <>
        <div className="relative min-h-screen">
            <video className="object-fill min-h-screen min-w-screen" autoPlay muted loop src="https://lf3-static.bytednsdoc.com/obj/eden-cn/gfeeh7pldnupqps/novel/welcome.mp4" poster="https://p6-novel.byteimg.com/img/novel-static/a64043022c1b13a5ad3c782919b6fa00~1920x0.jpeg"></video>
            <div className="absolute top-[200px] rounded-lg right-40 w-[428px] z-[100] box-borde bg-white p-[24px]">
                <Tabs defaultActiveTab='1' type={'text'} headerPadding={false} className="mt-4">
                    <TabPane key='1' title='验证码登录'>

                        <Form form={form} autoComplete='off'
                            onSubmit={onSumit} >
                            <FormItem className="w-full" field='username' rules={[{ required: true, message: '请输入手机号' }]}>
                                <Input style={{ width: '380px', height: '48px' }} placeholder='请输入手机号' />
                            </FormItem>
                            <FormItem field='password' rules={[{ required: true, message: '请输入密码' }]}>
                                <Input.Password name='password' className="mt-3" style={{ width: '380px', height: '48px' }} placeholder='请输入密码' />
                            </FormItem>

                            <Button loading={loading} htmlType='submit' type="primary" className="mt-5" style={{ backgroundColor: '#ff5f00', borderRadius: '12px', width: '100%', height: '48px' }}>登录/注册</Button>

                        </Form>
                    </TabPane>
                    <TabPane key='2' title='二维码登录' disabled>
                        <h1>二维码登录</h1>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </>
}